<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS & JS -->
    <link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <!--<script src="../node_modules/lodash/lodash.js"></script>-->
</head>
<body>
    <div id="hd" class="container">
        <h3 class="text-center">网站注册</h3>
        <form action="">
    	<div class="panel panel-default">
    		  <div class="panel-heading">
    				<h3 class="panel-title">网站注册须知</h3>
    		  </div>
    		  <div class="panel-body">
                  <h4>注册前请查看协议</h4>
                  <button type="button" class="btn btn-primary" v-on:click="look">查看协议</button>
                  <div v-if="status" class="thumbnail" style="margin-top:20px;">
                  <p>一、总则</p>
                      <p>1.1 保宝网的所有权和运营权归深圳市永兴元科技有限公司所有。</p>
                  <p> 1.2 用户在注册之前，应当仔细阅读本协议，并同意遵守本协议后方可成为注册用户。一旦注册成功，则用户与保宝网之间自动形成协议关系，用户应当受本协议的约束。用户在使用特殊的服务或产品时，应当同意接受相关协议后方能使用。</p>
                      <p>1.3 本协议则可由保宝网随时更新，用户应当及时关注并同意本站不承担通知义务。本站的通知、公告、声明或其它类似内容是本协议的一部分。</p>
                     <p> 二、服务内容</p>
                      <p>2.1 保宝网的具体内容由本站根据实际情况提供。</p>
                      <p>2.2 本站仅提供相关的网络服务，除此之外与相关网络服务有关的设备(如个人电脑、手机、及其他与接入互联网或移动网有关的装置)及所需的费用(如为接入互联网而支付的电话费及上网费、为使用移动网而支付的手机费)均应由用户自行负担。</p>
                      <p>三、用户帐号</p>
                      <p>3.1 经本站注册系统完成注册程序并通过身份认证的用户即成为正式用户，可以获得本站规定用户所应享有的一切权限；未经认证仅享有本站规定的部分会员权限。保宝网有权对会员的权限设计进行变更。</p>
                      <p>3.2 用户只能按照注册要求使用真实姓名，及身份证号注册。用户有义务保证密码和帐号的安全，用户利用该密码和帐号所进行的一切活动引起的任何损失或损害，由用户自行承担全部责任，本站不承担任何责任。如用户发现帐号遭到未授权的使用或发生其他任何安全问题，应立即修改帐号密码并妥善保管，如有必要，请通知本站。因黑客行为或用户的保管疏忽导致帐号非法使用，本站不承担任何责任。</p>
                      <p>四、使用规则</p>
                     <p> 4.1 遵守中华人民共和国相关法律法规，包括但不限于《中华人民共和国计算机信息系统安全保护条例》、《计算机软件保护条例》、《最高人民法院关于审理涉及计算机网络著作权纠纷案件适用法律若干问题的解释(法释[2004]1号)》、《全国人大常委会关于维护互联网安全的决定》、《互联网电子公告服务管理规定》、《互联网新闻信息服务管理规定》、《互联网著作权行政保护办法》和《信息网络传播权保护条例》等有关计算机互联网规定和知识产权的法律和法规、实施办法。</p>
                      <p>4.2 用户对其自行发表、上传或传送的内容负全部责任，所有用户不得在本站任何页面发布、转载、传送含有下列内容之一的信息，否则本站有权自行处理并不通知用户：</p>
                      <p>(1)违反宪法确定的基本原则的；</p>
                      <p>(2)危害国家安全，泄漏国家机密，颠覆国家政权，破坏国家统一的；</p>
                      <p>(3)损害国家荣誉和利益的；</p>
                      <p>(4)煽动民族仇恨、民族歧视，破坏民族团结的；</p>
                      <p>(5)破坏国家宗教政策，宣扬邪教和封建迷信的；</p>
                  <p>三、用户帐号</p>
                  <p>3.1 经本站注册系统完成注册程序并通过身份认证的用户即成为正式用户，可以获得本站规定用户所应享有的一切权限；未经认证仅享有本站规定的部分会员权限。保宝网有权对会员的权限设计进行变更。</p>
                  <p>3.2 用户只能按照注册要求使用真实姓名，及身份证号注册。用户有义务保证密码和帐号的安全，用户利用该密码和帐号所进行的一切活动引起的任何损失或损害，由用户自行承担全部责任，本站不承担任何责任。如用户发现帐号遭到未授权的使用或发生其他任何安全问题，应立即修改帐号密码并妥善保管，如有必要，请通知本站。因黑客行为或用户的保管疏忽导致帐号非法使用，本站不承担任何责任。</p>
                  <p>四、使用规则</p>
                  <p> 4.1 遵守中华人民共和国相关法律法规，包括但不限于《中华人民共和国计算机信息系统安全保护条例》、《计算机软件保护条例》、《最高人民法院关于审理涉及计算机网络著作权纠纷案件适用法律若干问题的解释(法释[2004]1号)》、《全国人大常委会关于维护互联网安全的决定》、《互联网电子公告服务管理规定》、《互联网新闻信息服务管理规定》、《互联网著作权行政保护办法》和《信息网络传播权保护条例》等有关计算机互联网规定和知识产权的法律和法规、实施办法。</p>
                  <p>4.2 用户对其自行发表、上传或传送的内容负全部责任，所有用户不得在本站任何页面发布、转载、传送含有下列内容之一的信息，否则本站有权自行处理并不通知用户：</p>
                  <p>(1)违反宪法确定的基本原则的；</p>
                  <p>(2)危害国家安全，泄漏国家机密，颠覆国家政权，破坏国家统一的；</p>
                  <p>(3)损害国家荣誉和利益的；</p>
                  <p>(4)煽动民族仇恨、民族歧视，破坏民族团结的；</p>
                  <p>(5)破坏国家宗教政策，宣扬邪教和封建迷信的；</p>
                  </div>
                  <div class="checkbox">
                      <label for="agree" class="label-control">
                          <input id="agree" type="checkbox" v-model="able" >同意协议
                      </label>
                  </div>
    		  </div>
    	</div>
        <button :disabled="!able" class="btn btn-primary center-block">注册</button>
        </form>
    </div>
    <script>
        var app=new Vue({
            el:'#hd',
            data:{
                status:false,
                able:false
            },
            methods:{
                look(){
                    this.status=!this.status;
                }
            }
        })
    </script>
</body>
</html>